/*
 * @Description:
 * @Autor: duyu
 * @Date: 2020年12月16日 16:00:39
 * @LastEditors: duyu
 * @LastEditTime: 2020-12-23 15:02:25
 */
import React, { useState, useEffect } from 'react'
import {Affix, Layout, Menu} from 'antd';
import Audio from "../../components/audio/index";
import "./App.css";
import MusicList from "../musicList";
import axios from 'axios';
import {DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined} from "@ant-design/icons";
import SubMenu from "antd/es/menu/SubMenu";


const {Header, Sider, Footer, Content} = Layout;

const App=()=> {

    /*
        let musics = [
            {
                "name": "试听曲1 《千秋》（Orch）",
                "artist": "古剑奇谭三",
                "cover": "http://static.missevan.com/dramacoversmini/202003/19/a9b45310a467cf6a5e723ee512fdf7a9163810.jpg",
                "url": "http://static.missevan.com/128BIT/202003/19/62fc27140d71c20b80d93ab13d244aac170946.flac"
            },
            {
                "name": "试听曲2 《天地遗陵》（Live）",
                "artist": "古剑奇谭三",
                "cover": "http://static.missevan.com/dramacoversmini/202003/19/a9b45310a467cf6a5e723ee512fdf7a9163810.jpg",
                "url": "http://static.missevan.com/128BIT/202003/20/549cdb089b675d98d918f4e9ecc0d6eb120201.flac"
            },
            {
                "name": "试听曲3 《荒天》（Live）",
                "artist": "古剑奇谭三",
                "cover": "http://static.missevan.com/dramacoversmini/202003/19/a9b45310a467cf6a5e723ee512fdf7a9163810.jpg",
                "url": "http://static.missevan.com/128BIT/202003/21/328ce661ce88d5f73c8f66c610e1d000113724.flac"
            },
            {
                "name": "望江亭",
                "artist": "黄诗扶",
                "cover": "",
                "url": "http://music.163.com/song/media/outer/url?id=1379884243.mp3"
            },
        ];
        */
    //https://music.163.com/api/playlist/detail?id=129802532&limit=100
    let [musicList, setMusicList] = useState([]);
    const fetchQueryData = async () => {
        //const result = await axios('/wyy/api/playlist/detail?id=75113488')
        const result = await axios('/wyy/related/playlist?id=75113488')
        console.log(result.data.playlists);
        let musicListTmp = []
        let musicIds = '';
        for (const musicItem of result.data.playlists) {
            console.log(musicItem);
            let music = {};
            musicIds+=musicItem.id+',';
            //let musicDetail = await axios('/wyy/song/url?id='+musicItem.id);
            //console.log(musicDetail);
/*            music["name"] = musicItem.name;
            let artists = musicItem.artists;
            music["artist"] = artists[0].name;
            music["url"] = "http://music.163.com/song/media/outer/url?id=" + musicItem.id + ".mp3"
*/
            musicListTmp.push(music);
        }
        console.log(musicIds);
        let musicDetails = await axios('/wyy/song/detail?ids='+musicIds.substr(0, musicIds.length - 1));
        console.log(musicDetails);
        console.log("app.js musicListTmp" + musicListTmp);
        //return musicListTmp;
        setMusicList(musicListTmp);
    }

    useEffect(() => {
        //setMusicList(fetchQueryData());
        fetchQueryData();
    }, [])

    //let music = 'http://static.missevan.com/128BIT/202003/19/62fc27140d71c20b80d93ab13d244aac170946.flac';

    let [collapsed, setCollapsed] = useState(false);
    const onCollapse = () => {
        setCollapsed(!collapsed);
    }

    return (
        <Layout style={{height: '100vh'}}>
            <Header style={{backgroundColor: '#fff', width: '100%'}}>网抑云音乐</Header>
            <Content>
                <MusicList musicList={musicList}/>
            </Content>
            <Footer>
                <Affix style={{width: '100%'}}>
                    <Audio musicList={musicList}/>
                </Affix>
            </Footer>
        </Layout>
    );
}

export default App;
